class Cart{
    constructor(){
        if(val){
            this.carInfor = JSON.parse(localStorage.getItem("carInfor"));
        }else{
            this.carInfor={};
        }
    }
    //添加购物车信息
    addInfor(id,num,flag){ //flag值为true false
        if(!this.carInfor[id] || flag){
            this.carInfor[id]=num;
        }else{
            this.carInfor[id]+=num;
        }
        localStorage.setItem("carInfor",JSON.stringify(this.carInfor));
    }
    //显示购物车列表
    showInfor(){
        //获取购物车页面的ul
        this.oUl = document.querySelectorAll("#cartList")[0];
        //取出商品列表信息
        this.infor = JSON.parse(localStorage.getItem("infor"));
        var str='';
        for(let item in this.carInfor){
            str +=`
            <li data-id="${item}">
                <input type="checkbox" class="perSelect">   
                <img src="${this.infor[item].imgsrc}">
                单价:<span>￥${this.infor[item].price}</span>
                数量:<button class="del">-</button>
                    <input type="text" value="${this.carInfor[item]}" class="num">
                    <button class="add">+</button>
                此产品总价:<span class="totprice">${this.infor[item].price * this.carInfor[item]}</span>
                <button class="delete">删除</button>
            </li>
            `;
        }
        this.oUl.innerHTML=str;
        ////////////////////////////////////////////////////////////////////////////////////////////////
        //以下皆为购物车页面的节点
        //获取全选按钮
        this.oCheckbox = document.querySelectorAll("#allSelect")[0];
        //获取单个商品的选择
        this.aPerSelects = document.querySelectorAll(".perSelect");
        //获取单个商品总价格显示
        this.totprice =  document.querySelectorAll(".totprice");
        //获取所有商品总价格
        this.zongjia = document.querySelectorAll(".zongjia")[0];
        //获取删除一个商品的按钮
        this.aDels = document.querySelectorAll(".del");
        //获取添加一个商品的按钮
        this.aAdds = document.querySelectorAll(".add");
        //获取显示商品数量的文本框
        this.aNums = document.querySelectorAll(".num");
        //获取删除商品按钮
        this.aBtns  = document.querySelectorAll(".delete");
        //获取li
        this.aLis  = document.querySelectorAll("li");
        console.log(this.aLis);
        //全选
        this.oCheckbox.onclick=()=>{
            //如果点击了全选按钮 那么所有单个商品也会被选中
            for(let k=0;k<this.aPerSelects.length;k++){
                this.aPerSelects[k].checked = this.oCheckbox.checked;
            }
            //显示下总价
            this.getTotalprice();
        }
        //单个的选择
        for(let n=0;n<this.aPerSelects.length;n++){
            this.aPerSelects[n].onclick=()=>{
                this.count =0 ;
                for(let m=0;m<this.aPerSelects.length;m++){
                    if(this.aPerSelects[m].checked){
                        this.count++;
                    }
                }
                //只有单个选择都被选 全选框才会选
                if(this.count==this.aPerSelects.length){
                    this.oCheckbox.checked = true;
                }else{
                    this.oCheckbox.checked = false;
                }
                this.getTotalprice();
            }
        }
        //循环添加点击事件
        for(let i=0;i<this.aDels.length;i++){
            //减
            this.aDels[i].onclick=()=>{
                this.id = this.aLis[i].getAttribute("data-id");
                let val= this.aNums[i].value--;
                if(val==1){
                    this.aNums[i].value=1;
                }
                //每次减完都得存
                this.addInfor(this.id,+this.aNums[i].value,true);
                this.updateData(i);
                this.getTotalprice();
            }
            //加
            this.aAdds[i].onclick=()=>{
                this.id = this.aLis[i].getAttribute("data-id");
                //实际开发过程中或许受库存或者限量影响 但这里先不设置受限
                this.aNums[i].value++;
                this.addInfor(this.id,+this.aNums[i].value,true);
                this.updateData(i);
                this.getTotalprice();
            }
            //动态改变获取值
            this.aNums[i].onchange=()=>{
                this.id = this.aLis[i].getAttribute("data-id");
                this.addInfor(this.id,+this.aNums[i].value,true);
                this.updateData(i);
                this.getTotalprice();
            }
            //删除节点与存入的信息
            this.aBtns[i].onclick=()=>{
                this.id = this.aLis[i].getAttribute("data-id");
                this.deleteInfor(this.id,i);
            }
        }
        //////////////////////////////////////////////////////////////////////////////////////////////////
    }
    updateData(i){
        this.totprice[i].innerText=this.aNums[i].value*this.infor[this.id].price;
    }
    getTotalprice(){
        this.tp= 0;
        for(let m=0;m<this.aAdds.length;m++){
            if(this.aPerSelects[m].checked ){
                this.tp += +this.totprice[m].innerText;
            }
        }
        this.zongjia.innerHTML = this.tp;
    }
    //删除
    deleteInfor(id,i){
        //删数据
        delete this.carInfor[id];
        localStorage.setItem("carInfor",JSON.stringify(this.carInfor));
        //删除节点
        this.oUl.removeChild(this.aLis[i]);
        this.aPerSelects[i].checked = false;
        //再执行价格的计算
        this.getTotalprice();
    }
}